<script setup lang="ts">
import {usePermissions} from "@/hooks/web/usePermissions";

const {permissions, fetchPermissions} = usePermissions();
import {useCommon} from "@/hooks/web/useCommon";
import {useDevice} from "@/hooks/web/useDevice";
import {admitList} from "@/api/admit";
import {useStorage} from "@/hooks/web/useStorage";
const {getStorage, setStorage, removeStorage} = useStorage()
onMounted(() => {
  let flag = getStorage('admitFlag')
  let searchItem = getStorage('admitForm');
  if (flag && searchItem) {
    pageData.currentPage = searchItem.page
    pageData.pageSize = searchItem.limit
    Object.assign(searchForm, searchItem)
  } else {
    removeStorage('admitForm')
  }
  fetchData()
  getProjectTree('tree')
  getTeacher('')
  gatherOptions()
  fetchPermissions()
})

onBeforeUnmount(() => {
  removeStorage('admitFlag')
})

const {
  mobileShow,
  pageData,
  optionsBox,
  gatherOptions,
  getTeacher,
  projectTree,
  getProjectTree,
  teacherOptions
} = useCommon()

const {mobile} = useDevice()
const router = useRouter();
let searchForm = reactive({
  realname: '',
  school: '',
  type: '',
  created_time: '',
  ruxue: '',
  zixun: '' // 招生老师
})
let loading = ref(false)
const tableData = reactive([])
const tableHeader = reactive([
  {label: '报考院校', prop: 'school_name'},
  {
    label: '系统时间', prop: 'created_time', width: '170px', showHtml: true, code: (row) => {
      if (row.created_change == 1) {
        return '<span style="color: #F56C6C">' + row.created_time + '</span>'
      } else {
        return '<span style="color: #67C23A">' + row.created_time + '</span>'
      }
    }
  },
  {
    label: '学生姓名', prop: 'realname', type: 'btn', method: (row) => {
      handleDetail(row)
    }
  },
  {label: '学位项目', prop: 'project'},
  {label: '专业', prop: 'zy1'},
  {label: '入学时间', prop: 'ruxue'},
  {label: '录入人', prop: 'luru_id_name', width: '90px'},
  {label: '招生老师', prop: 'teacher_id_name', width: '90px'},
  {label: '合作人', prop: 'hezuoren', width: '90px'},
  {label: '学生来源', prop: 'laiyuan'},
  {label: '来源详情', prop: 'laiyuan_xiangqing'}
])

let searchRef = ref('')
const handleReset = () => {
  searchRef.value.resetFields()
  searchForm.type = ''
}

const handleDetail = (row) => {
  setStorage('admitForm', searchForm)
  router.push({path: '/admit-management/info', query: {student_id: row.student_id, flag: 'admitFlag'}})
}

const onSearch = () => {
  pageData.currentPage = 1
  fetchData();
}

const handlePageChange = (param) => {
  pageData.pageSize = param.limit
  pageData.currentPage = param.page
  fetchData()
}

let cascaderRef = ref('')
const applyChange = (value) => {
  if (value) {
    searchForm.type = cascaderRef.value.getCheckedNodes()[0].data.type
  } else {
    searchForm.type = ''
  }
}

const fetchData = async () => {
  let params = searchForm
  params.page = pageData.currentPage
  params.limit = pageData.pageSize
  loading.value = true
  let res = await admitList(params)
  loading.value = false
  if (res) {
    tableData.splice(0)
    tableData.push(...res.data.list)
    pageData.total = res.data.page.amount
  }
}

</script>

<template>
  <el-row>
    <el-col :span="24">
      <el-form :inline="true" :model="searchForm" class="el-input-form" ref="searchRef">
        <el-form-item label="学生姓名" prop="realname" v-show="mobileShow || !mobile">
          <el-input
              v-model="searchForm.realname"
              clearable
              placeholder="请输入学生姓名"
          />
        </el-form-item>
        <el-form-item label="报考院校" v-show="mobileShow || !mobile" prop="school">
          <el-cascader clearable v-model="searchForm.school" :options="projectTree" ref="cascaderRef"
                       :props="{ checkStrictly: true, emitPath: false }" @change="applyChange"></el-cascader>
        </el-form-item>
        <el-form-item label="招生老师" :prop="teacherOptions.length === 1 ? '' : 'zixun'"
                      v-show="mobileShow || !mobile">
          <el-select v-model="searchForm.zixun" placeholder="请选择原招生老师" clearable>
            <el-option label="未绑定" value="0"></el-option>
            <el-option v-for="(item, index) in teacherOptions" :label="item.name" :value="item.name"
                       :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系统时间" prop="created_time" v-show="mobileShow || !mobile">
          <el-date-picker v-model="searchForm.created_time" type="date"
                          placeholder="系统时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
        </el-form-item>
        <el-form-item label="入学时间" prop="ruxue" v-show="mobileShow || !mobile">
          <el-select v-model="searchForm.ruxue" placeholder="请选择入学时间" clearable>
            <el-option
                v-for="(item,index) in optionsBox.ruxue_list"
                :key="index"
                :label="item.name"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-show="mobile" plain @click="mobileShow = !mobileShow">{{
              mobileShow ? '取消高级查询' : '高级查询'
            }}
          </el-button>
          <el-button type="primary" plain @click="onSearch" icon="search">查询</el-button>
          <el-button @click="handleReset" icon="RefreshRight">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" v-loading="loading">
      <tableList :table-data="tableData"
                 :page-data="pageData"
                 :table-header="tableHeader"
                 @handle-page-change="handlePageChange"
      ></tableList>
    </el-col>
  </el-row>
</template>